﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<style>
* {
	padding: 0;
	margin: 0;
}

body {
	width: 100%;
	height: 100vh;
	/* 使用 flex 使得 loginBox 在中间 */
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(0, 11, 32);
	color: #409EFF;
}

.loginBox {
	width: 500px;
	height: 364px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, .5);
	box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, .6);
	padding: 40px;
	box-sizing: border-box;
}

h2 {
	text-align: center;
	color: #fff;
	margin-bottom: 30px;
}

.item {
	height: 45px;
	border-bottom: 1px solid #fff;
	margin-bottom: 40px;
	position: relative;
}

.item input {
	width: 100%;
	height: 100%;
	color: #fff;
	/* 输入框输入光标为白色 */
	padding-top: 20px;
	box-sizing: border-box;
}

/* valid 合法状态下  focus 获取焦点时*/
.item input:focus+label, .item input:valid+label {
	top: 0;
	font-size: 12px;
}

.item label {
	position: absolute;
	left: 0;
	top: 12px;
	transition: all .2s linear;
	/* linear 匀速 */
}

/* 重置输入框和按钮的样式 */
input, button {
	background: transparent;
	border: none;
	outline: none;
}

.btn {
	padding: 10px 20px;
	margin-top: 30px;
	color: #409EFF;
	position: relative;
	overflow: hidden;
}

.btn:hover {
	background-color: #409EFF;
	border-radius: 5px;
	color: #fff;
	/* text-transform: uppercase; */
	/* 文字大写 */
	/* letter-spacing: 2px; */
	/* 字母间隔 */
}

.btn>span {
	position: absolute;
}

.btn>span:nth-child(1) {
	width: 100%;
	height: 2px;
	background-image: linear-gradient(to right, transparent, #409EFF);
	left: -100%;
	top: 0;
	animation: span-line-one 1s linear infinite;
}

.btn>span:nth-child(2) {
	width: 2px;
	height: 100%;
	background-image: linear-gradient(to bottom, transparent, #409EFF);
	right: 0;
	top: -100%;
	/* 延迟 0.25s */
	animation: span-line-two 1s .25s linear infinite;
}

.btn>span:nth-child(3) {
	width: 100%;
	height: 2px;
	background-image: linear-gradient(to left, transparent, #409EFF);
	left: 100%;
	bottom: 0;
	/* 延迟 0.5s */
	animation: span-line-three 1s .5s linear infinite;
}

.btn>span:nth-child(4) {
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to top, transparent, #409EFF);
    left: 0;
    bottom: -100%;
    /* 延迟 0.75s */
    animation: span-line-four 1s .75s linear infinite;
}

@keyframes span-line-one {
    50%,
    100% {
        left: 100%;
    }
}

@keyframes span-line-two {
    50%,
    100% {
        top: 100%;
    }
}

@keyframes span-line-three {
    50%,
    100% {
        left: -100%;
    }
}

@keyframes span-line-four {
    50%,
    100% {
        bottom: 100%;
    }
}

</style>
</head>
<body>
	<div class="loginBox">
		<h2>登录小秘书系统</h2>
		<form action="login" method="post">
			<div class="item">
				<!-- required 对输入框非空校验 -->
				<input type="text" required name="username"> <label
					for="username">用户名</label>
			</div>
			<div class="item">
				<input type="password" required name="password"> <label
					for="password">密码</label>
			</div>
			<button class="btn">
				登录 <span></span> <span></span> <span></span> <span></span>
			</button>
		</form>

	</div>
</body>
</html>